<template>
  <div class="mx-auto w-4/5 py-4" id="div-1">
    <!-- 第一部分：5个卡片 -->
    <a-row class="flex justify-between mb-16" id="row-1">
      <a-col v-for="i in 5" :key="i" class="w-[18.5%]" :id="`card-col-${i}`">
        <a-card :id="`card-${i}`" class="flex flex-col justify-between">
          <a-image :id="`card-image-${i}`" class="w-full mb-24" src="https://picsum.photos/id/1/333/222" />
          <a-space direction="vertical" class="p-2.5" :id="`card-content-${i}`">
            <a-typography-text :id="`card-text-1-${i}`"
              >你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</a-typography-text
            >
            <a-typography-text :id="`card-text-2-${i}`">你好你好</a-typography-text>
            <a-typography-text class="text-red-500" :id="`card-price-${i}`">
              ￥20
              <a-typography-text class="text-gray-500 line-through" :id="`card-price-old-${i}`">￥20</a-typography-text>
            </a-typography-text>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

    <!-- 分割线 -->
    <a-divider class="border-gray-500 my-8" id="divider-1">
      <a-image class="w-full" src="https://picsum.photos/id/1/666/111" id="divider-image-1" />
    </a-divider>

    <!-- 第二部分：4个卡片 -->
    <a-row :gutter="40" class="mb-16" id="row-2">
      <a-col v-for="i in 4" :key="i" :span="12" :id="`card-col-2-${i}`">
        <a-card :id="`card-2-${i}`">
          <a-row class="flex" :id="`card-row-2-${i}`">
            <a-col class="flex-1" :id="`card-image-col-2-${i}`">
              <a-image class="w-full" src="https://picsum.photos/id/2/333/180" :id="`card-image-2-${i}`" />
            </a-col>
            <a-col class="flex-1 flex flex-col relative pl-4" :id="`card-content-col-2-${i}`">
              <a-typography-title :level="3" class="my-2.5" :id="`card-title-2-${i}`">biaoti</a-typography-title>
              <a-typography-text class="my-2.5" :id="`card-text-2-${i}`">
                文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
              </a-typography-text>
              <a-typography-text class="absolute bottom-2.5 text-gray-500" :id="`card-date-2-${i}`"> 2025-02-08发布 </a-typography-text>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 分割线 -->
    <a-divider class="border-gray-500 my-8" id="divider-2">
      <a-image class="w-full" src="https://picsum.photos/id/1/666/111" id="divider-image-2" />
    </a-divider>

    <!-- 第三部分：图片网格 -->
    <a-row :gutter="0" class="mb-16" id="row-3">
      <a-col :span="18" id="col-3-1">
        <a-row :gutter="0" id="row-3-1">
          <a-col :span="18" id="col-3-1-1">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/1/666/111" id="image-3-1-1" />
          </a-col>
          <a-col :span="6" id="col-3-1-2">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/1/444/333" id="image-3-1-2" />
          </a-col>
        </a-row>
        <a-row :gutter="0" id="row-3-2">
          <a-col :span="6" id="col-3-2-1">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/1/444/333" id="image-3-2-1" />
          </a-col>
          <a-col :span="18" id="col-3-2-2">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/1/666/111" id="image-3-2-2" />
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="6" id="col-3-2">
        <a-image width="100%" height="100%" src="https://picsum.photos/id/1/666/111" id="image-3-2" />
      </a-col>
    </a-row>

    <!-- 分割线 -->
    <a-divider class="border-gray-500 my-8" id="divider-3">
      <a-image class="w-full" src="https://picsum.photos/id/1/666/111" id="divider-image-3" />
    </a-divider>

    <!-- 第四部分：5个卡片 -->
    <a-row class="flex justify-between mb-16" id="row-4">
      <a-col v-for="i in 5" :key="i" class="w-[18.5%]" :id="`card-col-4-${i}`">
        <a-card :id="`card-4-${i}`" class="flex flex-col justify-between">
          <a-image :id="`card-image-4-${i}`" class="w-full mb-8" src="https://picsum.photos/id/1/333/333" />
          <a-space direction="vertical" class="p-2.5" :id="`card-content-4-${i}`">
            <a-typography-text :id="`card-text-4-1-${i}`">姓名</a-typography-text>
            <a-typography-text :id="`card-text-4-2-${i}`">美容诊所</a-typography-text>
          </a-space>
        </a-card>
      </a-col>
    </a-row>

    <!-- 分割线 -->
    <a-divider class="border-gray-500 my-8" id="divider-4">
      <a-image class="w-full" src="https://picsum.photos/id/1/666/111" id="divider-image-4" />
    </a-divider>

    <!-- 第五部分：4个卡片 -->
    <a-row :gutter="40" class="mb-16" id="row-5">
      <a-col :span="6" v-for="i in 4" :key="i" :id="`card-col-5-${i}`">
        <a-card class="p-2.5" :id="`card-5-${i}`">
          <a-typography-paragraph
            :id="`card-paragraph-5-${i}`"
            class="text-pink-500 border-solid border-x-0 border-t-0 border-b border-gray-100 pb-2 mb-2"
            >标题</a-typography-paragraph
          >
          <a-typography-text :id="`card-text-5-${i}`">
            文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文 文本文本文本文本文本文本文本文本文本文
            本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文本文本
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
          </a-typography-text>
        </a-card>
      </a-col>
    </a-row>

    <!-- 分割线 -->
    <a-divider class="border-gray-500 my-8" id="divider-5">
      <a-image class="w-full" src="https://picsum.photos/id/1/666/111" id="divider-image-5" />
    </a-divider>

    <!-- 第六部分：4个卡片 -->
    <a-row :gutter="40" class="mb-16" id="row-6">
      <a-col :span="6" v-for="i in 4" :key="i" :id="`card-col-6-${i}`">
        <a-card class="p-2.5" :id="`card-6-${i}`">
          <a-image class="w-full mb-5" src="https://picsum.photos/id/1/444/280" :id="`card-image-6-${i}`" />
          <a-typography-text :id="`card-text-6-${i}`">
            文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文本文本文本文
          </a-typography-text>
          <a-space class="text-pink-500 flex justify-between" :id="`card-price-6-${i}`">
            <a-typography-text class="text-pink-500">牙齿缺失</a-typography-text>
            <a-typography-text class="text-pink-500">￥0</a-typography-text>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
  // 脚本部分保持不变
</script>
